import { Text, View } from '@tarojs/components';
import { Cell, Loading } from '@nutui/nutui-react-taro';
import Taro from '@tarojs/taro';
import "./cinemaCard.scss";
import Serves from './Serves';




const CinemaCard = ({ props, isGetLocation }) => {
    if (!props) {
        return <View> <Loading type="circular" />Loading...</View>; // 或者其他适当的加载状态
    } else {
        const { title, price, location, distance, services, cinemaId } = props; // 解构props中的属性，简化代码并提高可读性。
        return (
            <View onClick={() => { Taro.navigateTo({ url: `/pages/cinema/cinemaDetail/cinemaDetail?id=${cinemaId}` }); }} className='cinemaCard'>
                <View className='cinemaCard-1line'>
                    <Text className='cinemaCard-1line-title'>{title}</Text>
                    <View className='cinemaCard-1line-priceContainer'>
                        {!price.n && <Text style={{ color: "gray" }}>暂无价格</Text>}
                        <Text className='price'>{price.n}</Text>
                        <Text>{price.q}</Text>
                    </View>
                </View>
                <View className='cinemaCard-2line'>
                    <Text>{location}</Text>
                    <Text>{isGetLocation ? distance : ""}</Text>
                </View>
                <View className='serves'>
                    {services.map((item, index) => {
                        let color = "#000000";
                        if (item.code === "allowRefund" || item.code === "endorse") {
                            color = "#111888";
                        } else if (item.code === "vipTag") {
                            color = "#118818";
                        } else if (item.code === "snack") {
                            color = "red";
                        }
                        return <Serves key={index} color={color} name={item.text} />;
                    })}

                </View>
            </View>
        );
    }

};

export default CinemaCard;
